/*
 * 操作日志管理视图
 * @Author: ljb
 * @Date: 2018-10-17 11:03:55
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-19 15:41:45
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-operate-log-views {
		padding: 20px;
    }
</style>
<template>
	<div class="v-admin-operate-log-views">

		<Tabs
			v-model="tag_name"
			type="card">

			<TabPane
				:label="$t('operate_log.log')"
				name="日志">

				<!-- 搜索组件 -->
				<search-form
					:operator-types="operatorable_type_admin"
					:log-types="log_types"
					@search="confirmSearch"
				/>

				<log-index
					:loading="table_loading"
					:logs="logList"
					:log-types="log_types"
					@sort="confirmSearch"/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="operate_logs.total"
						:current="operate_logs.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>

	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations } from 'vuex';

import qs from 'qs';

import { deleteEmptyValue } from 'src/utils/utils';	// 处理空参数

import logIndex from './index';
import searchForm from './search-form';

export default {
	name: 'OperateLogViews',
	components: {
		searchForm,
		logIndex,
	},
	data() {
		return {
			query_info: {
				page: 1,

				per_page: 20,

				log_type_id: '',

				operatorable_id: '',

				operatorable_type: '',

				// customer_id: '',

				// store_id: '',

				order_column: '',

				sort: '',

				time_range: [],
			}, // 页码

			search_info: {

				page: 1,

				per_page: 20,

			}, // 分页信息

			tag_name: this.$t('operate_log.log'),

			table_loading: false, // 表格更新时的loading

			operate_logs: {}, // 操作日志列表

			operatorable_type_admin: [], // 操作者的类型

			log_types: [], // 日志类型
		};
	},
	computed: {
		logList() {
			return this.operate_logs.data || [];
		},
	},
	mounted() {
		this.fetchLogCreate();
		this.fetchLogList(this.query_info);
	},
	methods: {
		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchLogList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchLogList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch({
			operatorable_type, operatorable_id, log_type_id, time_range, order_by, sort,
		}) {
			this.query_info.operatorable_type = operatorable_type;
			this.query_info.operatorable_id = operatorable_id;
			this.query_info.log_type_id = log_type_id;
			this.query_info.time_range = time_range;

			this.query_info.order_column = order_by || '';
			this.query_info.sort = sort || '';
			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchLogList(this.query_info);
		},

		/**
         * 获取日志列表搜索所属的信息
         * @return {undefined}
         */
		fetchLogCreate() {
			this.$http.get(`${API_LIST.ADMIN_OPERATE_LOG}/create`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.operatorable_type_admin = data.operatorable_type_admin;

					this.log_types = data.log_types;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				});
		},

		/**
         * 获取操作日志列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchLogList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(deleteEmptyValue(param));

			this.$http.get(`${API_LIST.ADMIN_OPERATE_LOG}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.operate_logs = data.operate_logs;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},
	},
};
</script>
